<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../css/PersonalData.css">
    <script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../jquery/jquery.validate.min.js"></script>
</head>
<body>
<div id="global">
    <div class="header">
        <div class="logo"><a href="" target="_blank" style="display: block;"><img src="../img/logo.png" alt=""></a></div>
        <div class="menu">
            <ul>
                <li><a href="../../user/html/HomePage.html">首页</a></li>
                <li><a href="../../user/html/booking_delivery.html">寄件服务</a></li>
                <li><a href="../../user/html/service.html">查询服务</a></li>
                <li><a href="MyShunda.html" id="my-topMenu-userCenter">个人中心</a> </li>
            </ul>
        </div>
        <div class="header-right">
            <div>
                <span>欢迎你，<i id="loginStatus"></i> &nbsp;</span>
                <span id="index-exit" class="cursor"><a href="/sdkd/user/html/login.html" id="exit">退出</a></span>
            </div>
        </div>
    </div>
    <div class="main-container">
        <div class="sidebar-container">
            <ul class="sidebar-main">
                <li class="nav-top" ><img src="../img/left_menu_top.jpg"></li>
                <li class="nav-item"><a href="MyShunda.html" class>我的瞬达</a> </li>
                <li class="nav-item"><a href="MyCourier.html" class>我的快递</a> </li>
                <li class="nav-item"><a href="AddressBook.html" class>我的地址簿</a> </li>
                <li class="nav-item"><a href="PersonalData.html" class>个人资料设置</a> </li>
                <li class="nav-item"><a href="Bind-account.html" class>账户绑定</a> </li>
                <li class="nav-item"><a href="RealNameInfo.html" class>实名信息</a> </li>

                <li class="nav-bottom"><img src="../img/left_menu_bottom.jpg"></li>
            </ul>
        </div>
        <div class="item-main-container">
            <div class="personal-setting-wrapper">
                <div class="header">个人资料设置</div>
                <div class="s-box" >
                    <div class="aside">
                        <span class="head-pic">
                            <img src="../img/t.png" alt="个人头像" id="userImg">
                        </span>
                    </div>
                    <div class="amain">
                        <p>
                            <span>昵称：</span>
                            <span id="userName"></span>
                        </p>
                        <p>
                            <span>身份证号：</span>
                            <span id="idCard"></span>
                        </p>
                        <p>
                            <span>性别：</span>
                            <span id="sex"></span>
                        </p>
                        <p>
                            <span>年龄：</span>
                            <span id="ageInfo"></span>
                        </p>
                        <p>
                            <span>详细地址：</span>
                            <span id="address"></span>
                        </p>
                        <button type="button" class="el-button" id="update" >
                            <span>修改</span>
                        </button>
                    </div>
                </div>
                <div class="s-box1" style="display: none">
                    <div class="amain1">
                        <form action="" class="el-form"  id="submitForm">
                            <div class="aside">
                                <span class="head-pic" id="head-pic">
                                    <img src="../img/t.png" alt="个人头像" id="headImg">
                                    <input type="file" id="headPortrait" name="file">
                                </span>
                            </div>
                            <div  class="amain2">
                            <div class="el-form-item">
                                <label for="nickname" class="el-form-item_label" style="width: 80px">
                                    昵称
                                </label>
                                <div class="el-form-item_content" style="margin-left: 80px">
                                    <div class="el-input">
                                        <input type="text" autocomplete="off" placeholder="请填写昵称" maxlength="16" class="el-input_inner" id="nickname" name="userName" required>
                                    </div>
                                </div>
                            </div>
                            <div class="el-form-item">
                                <label for="idcardnum" class="el-form-item_label" style="width: 80px">
                                    身份证号
                                </label>
                                <div class="el-form-item_content" style="margin-left: 80px">
                                    <div class="el-input">
                                        <input type="text" autocomplete="off" placeholder="请输入身份证号码" maxlength="18" class="el-input_inner" id="idcardnum" name="idCard" required>
                                    </div>
                                </div>
                            </div>
                            <div class="el-form-item">
                                <label  class="el-form-item_label" style="width: 80px">
                                    性别
                                </label>
                                <div class="el-form-item_content" style="margin-left: 80px">
                                    <label class="radio-inline">
                                        <input type="radio" name="sex" value="男" id="male">男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="sex" value="女" id="female">女
                                    </label>
                                </div>
                            </div>
                            <div class="el-form-item">
                                <label for="age" class="el-form-item_label" style="width: 80px">
                                    年龄
                                </label>
                                <div class="el-form-item_content" style="margin-left: 80px">
                                    <div class="el-input">
                                        <input type="text" autocomplete="off" placeholder="请填写年龄" maxlength="16" class="el-input_inner" id="age" name="age">
                                    </div>
                                </div>
                            </div>
                            <div class="el-form-item">
                                <label for="homeaddress" class="el-form-item_label" style="width: 80px">
                                    详细地址
                                </label>
                                <div class="el-form-item_content" style="margin-left: 80px">
                                    <div class="el-input">
                                        <input type="text" autocomplete="off" placeholder="请填写详细地址" maxlength="16" class="el-input_inner" id="homeaddress" name="address">
                                    </div>
                                </div>
                            </div>
                            <div class="el-form-item">
                                <div class="el-form-item_content" style="margin-left: 80px">
                                    <button type="button" class="el-button" id="submit" >
                                        <span>提交</span>
                                    </button>
                                </div>
                            </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="el-dialog__wrapper cropper-wrapper" style="z-index: 2007; display: none;">
                    <div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog" style="margin-top: 15vh; width: 50%;">
                        <div class="el-dialog__header">
                            <span class="el-dialog__title"></span>
                            <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                                <i class="el-dialog__close el-icon el-icon-close"></i>
                            </button></div><div class="el-dialog__body">
                        <div data-v-6dae58fd="" class="vue-cropper">
                            <div data-v-6dae58fd="" class="cropper-box">
                                <div data-v-6dae58fd="" class="cropper-box-canvas" style="width: 1920px; height: 1080px; transform: scale(0.292708, 0.292708) translate3d(-2319.72px, -990.747px, 0px) rotateZ(0deg);">
                                    <img data-v-6dae58fd="" src="blob:https://my.zto.com/6d0cfaa7-7888-4821-a087-9f750d5521b6" alt="cropper-img"></div>
                            </div>
                            <div data-v-6dae58fd="" class="cropper-drag-box cropper-move cropper-modal"></div>
                            <div data-v-6dae58fd="" class="cropper-crop-box" style="width: 200px; height: 150px; transform: translate3d(181px, 175px, 0px);">
                                <span data-v-6dae58fd="" class="cropper-view-box">
                                    <img data-v-6dae58fd="" src="blob:https://my.zto.com/6d0cfaa7-7888-4821-a087-9f750d5521b6" alt="cropper-img" style="width: 1920px; height: 1080px; transform: scale(0.292708, 0.292708) translate3d(-2938.08px, -1588.61px, 0px) rotateZ(0deg);">
                                </span>
                                <span data-v-6dae58fd="" class="cropper-face cropper-move"></span>
                                <span data-v-6dae58fd="" class="crop-info" style="top: -21px;">
                                    200 × 150
                                </span>
                                <span data-v-6dae58fd="">
                                    <span data-v-6dae58fd="" class="crop-line line-w"></span>
                                    <span data-v-6dae58fd="" class="crop-line line-a"></span>
                                    <span data-v-6dae58fd="" class="crop-line line-s"></span>
                                    <span data-v-6dae58fd="" class="crop-line line-d"></span>
                                    <span data-v-6dae58fd="" class="crop-point point1"></span>
                                    <span data-v-6dae58fd="" class="crop-point point2"></span>
                                    <span data-v-6dae58fd="" class="crop-point point3"></span>
                                    <span data-v-6dae58fd="" class="crop-point point4"></span>
                                    <span data-v-6dae58fd="" class="crop-point point5"></span>
                                    <span data-v-6dae58fd="" class="crop-point point6"></span>
                                    <span data-v-6dae58fd="" class="crop-point point7"></span>
                                    <span data-v-6dae58fd="" class="crop-point point8"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                        <div class="el-dialog__footer">
                            <span class="dialog-footer">
                                <button type="button" class="el-button el-button--default">
                                    <span>取 消</span>
                                </button>
                                <button type="button" class="el-button el-button--primary">
                                    <span>确 定</span>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="foot">
        <div class="top">
            <div class="top-body">
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../../user/img/foot/outlets.svg">
                        </div>
                        &emsp;网点查询
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../../user/img/foot/service.svg">
                        </div>
                        &emsp;产品服务
                    </div>
                </div>
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../../user/img/foot/prescription.svg">
                        </div>
                        &emsp;运费时效
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../../user/img/foot/prohibit.svg">
                        </div>
                        &emsp;禁寄物品
                    </div>
                    <div class="in">

                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/weixin.svg">
                    </div>
                    <div class="text">
                        &emsp;微信公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/qq.svg">
                    </div>
                    <div class="text">
                        &emsp;QQ公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/alipay.svg">
                    </div>
                    <div class="text">
                        &emsp;支付宝服务窗
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/app.svg">
                    </div>
                    <div class="text">
                        &emsp;瞬达APP
                    </div>
                </div>
                <div class="interval">

                </div>
                <div class="logo">
                    <img src="../../user/img/foot/2.png">
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="text">
                瞬达快递 版权所有 <a href="#">沪ICP备13044869号</a>
            </div>

        </div>
    </div>
</div>
<script src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/PersonalData.js"></script>
<script src="../js/loginStatus.js"></script>
</body>
</html>